<template>
  <div class="home">
    <div class="sidebar" :class="{'fold': folded, 'full-screen': fullScreen}">
      <side-bar :backgroundColor="sideBarBgColor" :collapse="folded" @menuClick="handleMenuClick"></side-bar>
    </div>
    <div class="rightbar" :class="{'fold': folded, 'full-screen': fullScreen}">
      <div class="top-menu">
        <top-menu
          :folded="folded"
          @clickFoldIcon="handleClickFoldIcon"
          @clickFullScreen="handleFullScreen"
        ></top-menu>
      </div>
      <div class="normal-screen" v-show="fullScreen" @click="handleNormalScreen">
        <i class="el-icon-full-screen"></i>
      </div>
      <div class="main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import SideBar from "./components/SideBar";
import TopMenu from "./components/TopMenu";

export default {
  name: "Home",
  components: {
    SideBar,
    TopMenu
  },
  data() {
    return {
      sideBarBgColor: "#545c64",
      folded: false,
      fullScreen: false
    };
  },
  methods: {
    handleClickFoldIcon() {
      this.folded = !this.folded;
    },
    handleFullScreen() {
      this.fullScreen = true;
    },
    handleNormalScreen() {
      this.fullScreen = false;
    },
    handleMenuClick(message) {
      let sourcePath = this.$route.path;
      let destPath;
      if (message == "bank-financing-show") {
        destPath = "/bank-financing/show";
      } else if (message == "bank-financing-manage") {
        destPath = "/bank-financing/manage";
      } else if (message == "area") {
        destPath = "/area";
      } else if (message == "bank_financing-org") {
        destPath = "/bank_financing-org";
      } else if (message == "abroad") {
        destPath = "/abroad";
      } else if (message == "first-loan-chart") {
        destPath = "/first-loan-chart";
      } else if (message == "first-loan-manage") {
        destPath = "/first-loan-manage";
      } else if (message == "first-loan-table") {
        destPath = "/first-loan-table";
      } else if (message == "first-loan-org-category") {
        destPath = "/first-loan-org-category";
      } else if (message == "first-loan-base") {
        destPath = "/first-loan-base";
      } else if (message == "score-manage") {
        destPath = "/score-manage";
      } else if (message == "score-model") {
        destPath = "/score-model";
      } else if (message == "score-org") {
        destPath = "/score-org";
      } else if (message === "first-loan") {
        destPath = "/first-loan";
      } else if (message === "first-loan-result") {
        destPath = "/first-loan-result";
      } else if (message === 'first-loan-guarantee'){
        destPath = "/first-loan-guarantee";
      }
      if (sourcePath === destPath) {
        return;
      }
      this.$router.push(destPath);
    }
  }
};
</script>
<style lang="stylus" scoped>
.sidebar {
  position: fixed;
  left: 0;
  width: 200px;
  bottom: 0;
  top: 0;
  background-color: #545c64;
  overflow: auto;
  transition: all 1s;

  &.fold {
    width: 82px;
  }

  &.full-screen {
    width: 0px;
  }
}

.rightbar {
  margin-left: 200px;
  transition: all 1s;

  &.fold {
    margin-left: 82px;
  }

  &.full-screen {
    margin-left: 0;

    .top-menu {
      height: 0px;
    }

    .main {
      min-height: calc(100vh);
    }
  }

  .top-menu {
    height: 50px;
    min-width: 300px;
    overflow: auto;
  }

  .main {
    min-height: calc(100vh - 50px);
  }

  .normal-screen {
    position: absolute;
    background: #333;
    right: 50px;
    width: 50px;
    height: 50px;
    color: white;
    text-align: center;
    line-height: 50px;
    font-size: 36px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 1000;

    &:hover {
      font-size: 22px;
    }
  }
}
</style>
